<script>
import { ElMessage } from 'element-plus'

export default {
    data() {
        return {
            inpText: '',
            map: null
        }
    },
    mounted() {



        this.map = new BMapGL.Map("container");
        var point = new BMapGL.Point(116.404, 39.915);
        this.map.centerAndZoom(point, 15);
        this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        // map.setHeading(64.5);   //设置地图旋转角度
        // map.setTilt(73);       //设置地图的倾斜角度

        // map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式

        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        this.map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        this.map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
        this.map.addControl(cityCtrl);

        var location = new BMapGL.LocationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: new BMapGL.Size(20, 20)
        });  // 添加定位控件
        this.map.addControl(location);

        // 自定义个性化地图
        // map.setMapStyleV2({
        //     styleId: '8124556b6166dff8d6ecf9b17a936b41'
        // });


        // var point = new BMapGL.Point(116.404, 39.915);
        var marker = new BMapGL.Marker(point);        // 创建标注   
        this.map.addOverlay(marker);                     // 将标注添加到地图中

        marker.addEventListener("click", function () {
            // alert("您点击了标注");
            ElMessage.success('您点击了 蜜雪冰城 标注')
        });



        var polyline = new BMapGL.Polyline([
            new BMapGL.Point(116.399, 39.900),
            new BMapGL.Point(116.405, 39.920),
            new BMapGL.Point(116.415, 39.900),
            new BMapGL.Point(116.425, 39.920),
            new BMapGL.Point(116.435, 39.900),
        ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        this.map.addOverlay(polyline);

        polyline.addEventListener("click", function () {
            // alert("您点击了标注");
            ElMessage.success('您点击了 M 标注')
        });


        var polygon = new BMapGL.Polygon([
            new BMapGL.Point(116.387112, 39.920977),
            new BMapGL.Point(116.385243, 39.913063),
            new BMapGL.Point(116.394226, 39.917988),
            new BMapGL.Point(116.401772, 39.921364),
            new BMapGL.Point(116.41248, 39.927893)
        ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        this.map.addOverlay(polygon);




        var geolocation = new BMapGL.Geolocation();
        const _this = this
        geolocation.getCurrentPosition(function (r) {
            // console.log(1234567890);
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {

                _this.map.centerAndZoom(r.point, 15);


                var mk = new BMapGL.Marker(r.point);
                _this.map.addOverlay(mk);
                _this.map.panTo(r.point);
                alert('您的位置：' + r.point.lng + ',' + r.point.lat);
            }
            else {
                alert('failed' + this.getStatus());
            }
        });




        // function myFun(result) {
        //     var cityName = result.name;
        //     map.setCenter(cityName);
        //     alert("当前定位城市:" + cityName);
        // }
        // var myCity = new BMapGL.LocalCity();
        // myCity.get(myFun);

    },
    methods: {
        resChange() {
            var options = {
                onSearchComplete: function (results) {
                    // 判断状态是否正确
                    if (local.getStatus() == BMAP_STATUS_SUCCESS) {
                        var s = [];
                        for (var i = 0; i < results.getCurrentNumPois(); i++) {
                            s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
                        }
                        document.getElementById("r-result").innerHTML = s.join("<br/>");
                    }
                }
            };

            var local = new BMapGL.LocalSearch(this.map, options);
            local.search(this.inpText);
        }
    },
}
</script>
<template>
    <div>
        <h3>
            地图管理
            <input type="text" @keyup.enter="resChange" v-model="inpText" placeholder="请输入查询内容">
        </h3>

        <div style="height: 450px;" id="container"></div>

        <!-- 该div是用来显示查询结果的 -->
        <div id="r-result"></div>
    </div>
</template>
<!-- <style lang="scss" scoped>
#container {
    height: 100%
}
</style> -->
